<template>
  <div class="submit-coupons">
	  <div class="wraper">
		  <div class="cp-sb-steps">
			  <el-row>
				  <el-col :span="6">
					  <div class="grid-content step-succ">
						  <p class="title">{{$t('product.submitCoupons.step1')}}</p>
						  <p class="sub-title">{{$t('product.submitCoupons.step1Sub')}}</p>
					  </div>
				  </el-col>
				  <el-col :span="3"><div class="grid-content i-arrow-right"></div></el-col>
				  <el-col :span="6">
					  <div class="grid-content" :class="{'step-succ': currentStep == 3, 'step-2': currentStep == 2}">
						  <p class="title">{{$t('product.submitCoupons.step2')}}</p>
						  <p class="sub-title">{{$t('product.submitCoupons.step2Sub')}}</p>
					  </div>
				  </el-col>
				  <el-col :span="3"><div class="grid-content i-arrow-right"></div></el-col>
				  <el-col :span="6">
					  <div class="grid-content step-3">
						  <p class="title">{{$t('product.submitCoupons.step3')}}</p>
						  <p class="sub-title">{{$t('product.submitCoupons.step3Sub')}}</p>
					  </div>
				  </el-col>
			  </el-row>
		  </div>
		  <div class="cp-sb-step2" v-if="currentStep == 2">
			  <div class="info-2">{{$t('product.submitCoupons.txt1')}}</div>
			  <div class="shop-now">
				  <div class="title">{{$t('product.submitCoupons.txt2')}} ${{order.orderInfo.priceCents | formatNumber}}{{$t('product.submitCoupons.txt3')}}</div>
				  <el-row>
					  <el-col :span="15">
						  <product-detail :prd="order.orderInfo"></product-detail>
					  </el-col>
					  <el-col :span="6" style="text-align: right">
						  <a :href="shopNow" target="_blank" class="shop-now-btn">{{$t('product.detail.shop_now')}}</a>
					  </el-col>
				  </el-row>
				  <!-- 低端 -->
				  <div class="info-2 box-sub-t" v-if="productDetail.serviceLevel == 1">{{$t('product.submitCoupons.txt6')}}</div>
				  <!-- 高端 -->
				  <div class="high-txt" v-if="productDetail.serviceLevel == 0">
				  	<div class="h-title">{{$t('product.submitCoupons.sop')}}</div>
				  	<ul class="high-sop">
				  		<li>1、{{$t('product.submitCoupons.sop1')}} <span> {{productDetail.keywords}}</span></li>
				  		<li>2、{{$t('product.submitCoupons.sop2')}}</li>
				  		<li>3、{{$t('product.submitCoupons.sop3')}}</li>
				  		<li>4、{{$t('product.submitCoupons.sop4')}}</li>
				  		<li>5、{{$t('product.submitCoupons.sop5')}}</li>
				  	</ul>
				  </div>
				  <router-link class="go-help" to="/help">Learn more about how to request your cashback</router-link>	
			  </div>
			  <el-button type="warning" class="earn-btn" @click="goStep3">{{$t('product.submitCoupons.txt7')}}</el-button>
		  </div>
		  <div class="cp-sb-step3" v-if="currentStep == 3">
		  	<el-form autoComplete="on" :model="formModel" :rules="orderRules" ref="orderForm">
			  <div class="info-2">{{$t('product.submitCoupons.txt8')}}</div>
			  <div class="shop-now">
			  	<el-form-item prop="amazonOrderNo">
		          <el-input v-model="formModel.amazonOrderNo" name="amazonOrderNo" :placeholder="$t('product.submitCoupons.input1')"></el-input>
		        </el-form-item>
				<el-form-item prop="ppAccount">
		          <el-input v-model="formModel.ppAccount" name="ppAccount" :placeholder="$t('product.submitCoupons.input2')"></el-input>
		        </el-form-item>
			  </div>
			  <el-button type="warning" class="earn-btn" @click.native.prevent="submitOrder">{{$t('product.submitCoupons.input3')}}</el-button>
			</el-form>
		  </div>
	  </div>

  </div>
</template>

<script>
import productDetail from './component/detail.vue';
import { getOrderDetail, submitOrderInfo, getPrdDetail } from '@/api/c'

export default {
  name: 'submit',
  components: { productDetail },
  data() {
    return {
    	id: this.$route.params.orderId,
    	order: {orderInfo:{}},
    	productDetail: {},
		shopNow: '',
    	formModel: {
			ppAccount: '',
			amazonOrderNo: '',
			orderId: this.$route.params.orderId
    	},
		currentStep: this.$route.query.step || 2,
		orderRules: {
	        ppAccount: [{ required: true, message: 'papal account is required', trigger: 'change' }],
	        amazonOrderNo: [{ required: true, message: 'order number is required', trigger: 'change' }]
	      }
    }
  },
  created() {
	  this.getOrder()
	  console.dir(this.$route.query)
	},
	methods: {
	  getOrder() {
	  	getOrderDetail({orderId: this.id}).then(response => {
            this.order = response.data
            getPrdDetail({prdId: response.data.orderInfo.productId}).then(response => {
	            this.productDetail = response.data
				if (response.data.serviceLevel == 0) {
					this.shopNow = this.order.orderInfo.amazonLink
				}
	        })
            // if (!this.order.clientCouponId) {
            // 	this.$message.error('you have not choose one coupon!');
            // 	setTimeout(() => {
            // 		this.$router.push('list')
            // 	}, 500)
            // }
        })
        
	  },
	  goStep3() {
	  	this.currentStep = 3;
	  },
	  submitOrder() {
	  	this.$refs.orderForm.validate(valid => {
         if (valid) {
         	submitOrderInfo(this.formModel).then(response => {
	            this.$message({
		          message: 'submit success!',
		          type: 'success'
		        });
	        })
         } else {
           console.log('error submit!!')
           return false
         }
       })
	  	
	  }
	}
}
</script>

<style  scoped>
p {
	margin: 0;
}
li {
	list-style: none;
}
.submit-coupons {
	background: #FAFBFC;
	padding: 48px 0;
}
.submit-coupons .wraper {
	width: 870px;
	margin: 0 auto;
}
.submit-coupons .step-succ {
	background: url("../../../assets/icons/i-succ.png") no-repeat center left;
	background-size: 13%;
}
.submit-coupons .step-2 {
	background: url("../../../assets/icons/number-2.png") no-repeat center left;
	background-size: 13%;
}
.submit-coupons .step-3 {
	background: url("../../../assets/icons/number-3.png") no-repeat center left;
	background-size: 13%;
}
	.cp-sb-steps .title {
		font-size: 16px;
		padding: 4px 0 5px 0;
		color: #333333;
		padding-left: 52px;
	}
	.cp-sb-steps .sub-title {
		font-size: 13px;
		color: #666666;
		padding-left: 52px;
	}
	.i-arrow-right {
		background: url("../../../assets/icons/i-arrow-right.png") no-repeat center;
		background-size: 8%;
	}
	.cp-sb-steps .grid-content {
		height: 43px;
	}
	.info-2 {
		padding: 50px 0 25px 0;
		text-align: center;
		font-size: 20px;
		color: #3DBDB6;
	}
	.shop-now {
		width: 870px;
		padding: 40px 20px 40px 40px;
		border: 1px solid #E5E5E5;
		background: #ffffff;
		-webkit-box-shadow: 0 7px 12px rgba(0,0,0,0.1);
		box-shadow: 0 7px 12px rgba(0,0,0,0.1);
		margin-bottom: 90px;
	}
	.shop-now .title {
		font-size: 14px;
		color: #333333;
		padding-bottom: 30px;
	}

	.box-sub-t {
		font-size: 14px;
		color: #333333;
	}
	.submit-coupons .earn-btn {
		background: #FFB73E;
		border-color: #FFB73E;
		width: 156px;
		display: block;
		margin: 0 auto;
	}
	.cp-sb-step3 .shop-now {
		padding: 25px 40px 20px;
	}
	.cp-sb-step3 .el-input {
		margin-top: 15px;
	}
	.high-txt {

	}
	.high-txt .h-title {
		color: #333333;
		padding: 10px 0;
		margin-top: 35px;
	}
	.high-sop {
		padding: 0 0 40px 0;
		margin: 0;
	}
	.high-sop li {
		font-size: 10px;
		line-height: 26px;
	}
	.high-sop li span{ color: #FFB73E; }
	.go-help {
		color: #3DBDB6;
	}
</style>
<style type="text/css">

</style>
